<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>22_微任务和宏任务-执行流程</title>
  <!-- 
  在 JavaScript 中，微任务（Microtasks）和宏任务（Macrotasks）是事件循环（Event Loop）机制的重要组成部分。它们的执行流程影响了代码的执行顺序和性能。以下是对微任务和宏任务执行流程的说明总结：

  1. 任务的分类
  - 宏任务（Macrotasks）：包括整体代码块、 `setTimeout` 、 `setInterval` 、 `I/O 操作` 等。每次事件循环都会执行一个宏任务。
  - 微任务（Microtasks）：包括  `Promise`  的回调、 `MutationObserver`  等。微任务在当前宏任务执行完后、下一个宏任务开始前执行。

  2. 执行流程
  JavaScript 的执行流程遵循以下步骤：

  1. 执行宏任务：从任务队列中取出一个宏任务并执行。
  2. 执行微任务：在宏任务执行完后，立即执行所有微任务。此时会不断检查微任务队列，直到微任务队列为空。
  3. 渲染：在微任务队列为空后，浏览器会进行 UI 渲染（如果需要的话）。
  4. 重复：回到第一步，继续执行下一个宏任务。

  3. 示例
  以下是一个简单的示例，展示了微任务和宏任务的执行顺序：
  console.log('Start'); // 宏任务

  setTimeout(() => {
    console.log('Timeout'); // 宏任务
  }, 0);

  Promise.resolve().then(() => {
    console.log('Promise 1'); // 微任务
  }).then(() => {
    console.log('Promise 2'); // 微任务
  });

  console.log('End'); // 宏任务
  输出顺序：
  Start
  End
  Promise 1
  Promise 2
  Timeout
  4. 关键点
  - 微任务会在当前宏任务结束后立即执行，而宏任务则是逐个执行。
  - 在同一个宏任务中，所有微任务会被执行完毕，才会进行下一个宏任务。
  - 这种机制使得微任务可以用来处理一些需要立即响应的操作，比如处理  `Promise`  的结果。

  5. 应用场景
  - 微任务适用于需要在当前操作完成后立即执行的场景，比如更新 UI 或处理异步操作的结果。
  - 宏任务适用于需要延迟执行的操作，比如定时器和 I/O 操作。

  总结
  微任务和宏任务的执行流程是 JavaScript 事件循环的重要部分。理解它们的执行顺序可以帮助开发者更好地控制代码的执行和优化性能。在实际开发中，合理使用微任务和宏任务可以提高应用的响应速度和用户体验。
  -->
</head>
<body>
  
</body>
</html>